<template>
	<div class="cropper">
		<vueCropper
			:ref="refCom"
			:img="img"
			:outputType="outputType"
			:autoCrop="autoCrop"
			:autoCropWidth="autoCropWidth"
			:autoCropHeight="autoCropHeight"
			@realTime="realTime"
			:fixedBox="fixedBox"
		></vueCropper>
	</div>
</template>

<script>
export default {
	name: "FrontCropper",
	props: {
		refCom: {
			type: String,
			require: true,
		},
		img: String,
		outputType: {
			type: String,
			default: "png",
		},
		autoCrop: {
			type: Boolean,
			default: true,
		},

		fixedBox: {
			type: Boolean,
			default: false,
		},
		autoCropHeight: {
			type: Number,
			default: 130,
		},
		autoCropWidth: {
			type: Number,
			default: 130,
		},
	},

	methods: {
		realTime(data) {
			this.$emit("real-time", data)
		},
		rotateRight() {
			this.$refs[this.refCom].rotateRight()
		},
		rotateLeft() {
			this.$refs[this.refCom].rotateLeft()
		},
		updateScale(scale) {
			this.$refs[this.refCom].changeScale(scale)
		},
		getCropData(callback) {
			this.$refs[this.refCom].getCropData((data) => {
				callback(data)
			})
		},
		getCropBlob(callback) {
			this.$refs[this.refCom].getCropBlob((data) => {
				callback(data)
			})
		},
	},
}
</script>

<style scoped></style>
